<script setup lang="ts">
    import Child from './Child.vue'
    import {ref} from 'vue'
    let username = ref('admin')

    let age = ref(18)
</script>
<template>
    <h1>03-V-model父组件-{{username}}-{{age}}</h1>
    <!-- <input type="text" v-model="username"> -->
    <!-- v-model的本质
    公式: v-model = v-bind + @input
    -->
    <input type="text" v-bind:value="username" @input="username= (<HTMLInputElement>$event.target).value">

    <hr>
    <!-- 分析
    $event代表子组件传过来的数据
    :modelValue="username" => props父传子的语法
    update:modelValue是一个整体,自定义事件的名称是update:modelValue
    自定义事件 => 子传父
    -->
    <Child :modelValue="username" @update:modelValue="username = $event"/>
    <hr>
    <!-- 等同于 :modelValue='age' @update:modelValue="age = $event" -->
    <Child v-model="age"/>
    <h6>自定义的名称,默认是modelValue</h6>
    <Child v-model:uname="username" v-model:sage="age"/>
</template>